<template>
    <section class="common-links">
        <div class="engine-bg">
            <div class="search-bar">
                <div class="engine-header">
                    <ul class="engineShortcutList">
                        <li
                            v-for="(item, index) in engineList"
                            :key="index"
                            @click="engineCk(item.id)"
                        >
                            <a
                                href="#"
                                :class="
                                    item.id == activedengine
                                        ? 'engine-item engine-active'
                                        : 'engine-item'
                                "
                            >
                                <div class="icon">
                                    <img
                                        :src="item.img"
                                        width="14"
                                        alt=""
                                        data-v-c3e72636=""
                                    />
                                </div>
                                <span>{{ item.name }}</span>
                            </a>
                        </li>
                    </ul>
                    <div class="popover-btn">
                        <lls-dropdown>
                            <span class="lls-dropdown-link">
                                更多<i
                                    class="lls-icon-arrow-down lls-icon--right"
                                ></i>
                            </span>
                            <lls-dropdown-menu slot="dropdown">
                                <lls-dropdown-item
                                    @click.native="hanleChangequeryConfig(item)"
                                    v-for="(item, index) in moreList"
                                    :key="index"
                                >
                                    <img
                                        width="14"
                                        :src="item.img"
                                        alt=""
                                        style="margin: 0 5px 3px 0"
                                    />
                                    <span>{{ item.name }}</span>
                                </lls-dropdown-item>
                            </lls-dropdown-menu>
                        </lls-dropdown>
                    </div>
                    <span class="el-popover__reference">
                        <i class="lls-icon-s-tools"></i>
                    </span>
                </div>
                <div class="engine-input-wrapper">
                    <form class="engine-form" style="margin-top: 0">
                        <div class="engine-dropdown">
                            <img
                                width="20"
                                src="https://img.bidianer.com/engine/201905/06/5ccffcbb848d1_6VmFZFyC397EDMO.svg"
                                alt=""
                            />
                        </div>
                        <lls-input
                            placeholder="在百度中搜索(试试Tab键切换搜索)"
                            v-model="input3"
                        >
                            <lls-button
                                style="width: 120px; font-size: 17px"
                                slot="append"
                                >搜索</lls-button
                            >
                        </lls-input>
                    </form>
                </div>
            </div>
        </div>
        <div class="index-website__wrapper">
            <div class="web-header">
                <ul class="tab-menu">
                    <li>
                        <i
                            class="lls-icon-star-off"
                            style="color: #ff913b; margin-bottom: 2px"
                        ></i>
                    </li>

                    <li
                        v-for="(item, index) in starmarkList"
                        :key="index"
                        @click="starmarCk(item.id)"
                    >
                        <p
                            :class="
                                item.id == activedMenu
                                    ? 'move-active'
                                    : 'move-tab'
                            "
                            href="#"
                        >
                            <img
                                style="margin-bottom: 2px"
                                src="@/assets/images/spot.svg"
                                alt=""
                            />
                            <span>{{ item.name }}</span>
                            <!-- <i class="lls-icon-more"></i> -->
                        </p>
                    </li>
                </ul>
                <span class="el-icon-plus"><i class="lls-icon-plus"></i></span>
                <ul class="tool-bar">
                    <a> <i class="lls-icon-plus"></i><span>添加</span> </a>
                </ul>
            </div>
            <div class="links-grid">
                <div
                    v-for="(item, index) in websiteList"
                    :key="index"
                    class="link-item"
                >
                    <span class="el-dropdown">
                        <lls-dropdown>
                            <i class="lls-icon-more"></i>
                            <lls-dropdown-menu slot="dropdown">
                                <lls-dropdown-item
                                    v-for="(item, index) in linkList"
                                    :key="index"
                                >
                                    <i :class="item.img"></i>
                                    <span style="">{{ item.name }}</span>
                                </lls-dropdown-item>
                            </lls-dropdown-menu>
                        </lls-dropdown>
                    </span>
                    <a
                        class="text-darker link-item-a"
                        href="https://www.gaoding.com/utms/06cbc81c822d4827851f23fed8202134"
                        target="_blank"
                    >
                        <div class="cover">
                            <img :src="item.img" alt="" />
                        </div>
                        <div class="content">
                            <div class="flex items-center">
                                <h4
                                    title="免费AI绘图"
                                    class="link-item-title text-ellipsis"
                                >
                                    {{ item.name }}
                                </h4>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
export default {
    data() {
        return {
            engineList: [
                {
                    id: 0,
                    img: "https://img.bidianer.com/engine/201905/06/5ccffcbb848d1_6VmFZFyC397EDMO.svg",
                    name: "百度",
                    value: "baidu",
                },
                {
                    id: 1,
                    img: "https://img.bidianer.com/engine/201904/14/5cb34ca75d587y5HCF01hkaYdV7cV.svg",
                    name: "视频",
                    value: "shipin",
                },
                {
                    id: 2,
                    img: "https://img.bidianer.com/engine/201904/14/5cb34424d14e6HcH59ZkZZEe8ND-7.svg",
                    name: "音乐",
                    value: "yinyue",
                },
                {
                    id: 3,
                    img: "https://img.bidianer.com/engine/201904/15/5cb4182d9c42cEu-yEtxPyEbjiNq7.svg",
                    name: "图片",
                    value: "tupian",
                },
                {
                    id: 4,
                    img: "https://img.bidianer.com/engine/201904/16/5cb544c26d015jJ5gQ9ojDZAP1qW4.svg",
                    name: "地图",
                    value: "ditu",
                },
                {
                    id: 5,
                    img: "https://img.bidianer.com/engine/202102/19/602f80ddaf6ba7HVOvJDCkN_40P_g.png?imageView2/2/w/28/h/28/q/100",
                    name: "翻译",
                    value: "fanyi",
                },
                {
                    id: 6,
                    img: "https://img.bidianer.com/engine/201904/14/5cb33fa100ac2wNtDZkBlvcVsZ05N.svg",
                    name: "微博",
                    value: "weibo",
                },
                {
                    id: 7,
                    img: "https://img.bidianer.com/engine/202102/19/602fd5b78adfe2K5aUWS_vedEJ3ns.svg",
                    name: "知乎",
                    value: "zhihu",
                },
                {
                    id: 8,
                    img: "https://img.bidianer.com/engine/202102/19/602fd5519c2fd6Uqc-hj56Er6b5bt.svg",
                    name: "淘宝",
                    value: "taobao",
                },
                {
                    id: 9,
                    img: "https://img.bidianer.com/engine/202102/19/602e9034e75ffRuKpMBFwPK8RQ-Z9.svg",
                    name: "京东",
                    value: "jingdong",
                },
                {
                    id: 10,
                    img: "https://img.bidianer.com/engine/202102/19/602e9034e75ffRuKpMBFwPK8RQ-Z9.svg",
                    name: "京东",
                    value: "jingdong",
                },
                {
                    id: 11,
                    img: "https://img.bidianer.com/engine/201904/14/5cb34d1303b1blA85SUXF98Q7LZI9.svg",
                    name: "B站",
                    value: "Bzhan",
                },
                {
                    id: 12,
                    img: "https://img.bidianer.com/engine/201904/16/5cb54fc433cdeudM4WmQz7yc9TlSY.svg",
                    name: "菜谱",
                    value: "caipu",
                },
            ],
            moreList: [
                {
                    img: "https://img.bidianer.com/engine/201904/15/5cb410da6d3adebYCvhFQfJkm0afc.ico",
                    name: "图标",
                    value: "tubiao",
                },
                {
                    img: "https://img.bidianer.com/engine/202102/22/60330a29c67a0EjquOwkEsg0m9PP5.svg",
                    name: "字体",
                    value: "ziti",
                },
                {
                    img: "https://img.bidianer.com/engine/202102/22/6033091a00e6eEOF5DuJctk-iKLjj.png?imageView2/2/w/28/h/28/q/100",
                    name: "表情",
                    value: "baiqing",
                },
                {
                    img: "https://img.bidianer.com/engine/201904/14/5cb3407b5e7998B5paS4A0LCkOQm-.svg",
                    name: "贴吧",
                    value: "tieba",
                },
                {
                    img: "https://img.bidianer.com/engine/201904/15/5cb41d34243d10pWWPy-hq-vRDEHO.svg",
                    name: "学术",
                    value: "xueshu",
                },
                {
                    img: "https://img.bidianer.com/engine/201904/14/5cb341a881ece8Qv9N-3NTr8iSsZj.svg",
                    name: "微信",
                    value: "weixin",
                },
                {
                    img: "https://img.bidianer.com/engine/201904/16/5cb5729d6719aCKPrkN8PK4n3P8o-.png?imageView2/2/w/28/h/28/q/100",
                    name: "知道",
                    value: "zhidao",
                },
                {
                    img: "https://img.bidianer.com/engine/201904/14/5cb32c7548450S2ipCJIbUjNfZp--.svg",
                    name: "书影音",
                    value: "shuyingyin",
                },
            ],
            websiteList: [
                {
                    img: "https://img.bidianer.com/website/202404/29/662f85631759dS9IztXjfTdiBqB34.png?imageView2/2/w/64/h/64/q/100/ignore-error/1",
                    name: "免费AI绘图",
                    value: "mianfeiAI",
                },
                {
                    img: "https://img.bidianer.com/website/202404/02/660b509eb0312eRtblxYNuc_q2vTZ.ico?imageView2/2/w/64/h/64/q/100/ignore-error/1",
                    name: "有言文生视频",
                    value: "weshengshipin",
                },
                {
                    img: "https://img.bidianer.com/website/202405/06/6638e52ad0f43aCE9vyNf-MsJxwW_.png?imageView2/2/w/64/h/64/q/100/ignore-error/1",
                    name: "无广告免费AI搜索",
                    value: "wuguanggaoAI",
                },
                {
                    img: "https://img.bidianer.com/website/202405/21/664c4b8d9e19fSdEM-v2wS1o6Xp8T.png?imageView2/2/w/64/h/64/q/100/ignore-error/1",
                    name: "极简免费AI标签页",
                    value: "jijianAI",
                },
                {
                    img: "https://img.bidianer.com/website/202306/27/649af4e5e61c8CDOFuLg3lBHvwgSM.ico?imageView2/2/w/64/h/64/q/100/ignore-error/1",
                    name: "免费AI写作",
                    value: "AIxiezuo",
                },
                {
                    img: "https://img.bidianer.com/website/202309/23/650e538ca34bapIH56-zQzVtsAtzs.ico?imageView2/2/w/64/h/64/q/100/ignore-error/1",
                    name: "大带宽服务器购买",
                    value: "AIxiezuo",
                },
                {
                    img: "https://img.bidianer.com/website/202405/09/663c8f09384bdouhemJx3anHtBvRJ.png?imageView2/2/w/64/h/64/q/100/ignore-error/1",
                    name: "球赛通-足球即时比分",
                    value: "qiusaitong",
                },
                {
                    img: "https://img.bidianer.com/website/202402/22/65d6e30538491VYL2UJqdFD_tOXZy.png?imageView2/2/w/64/h/64/q/100/ignore-error/1",
                    name: "秘塔AI搜索",
                    value: "mitaAI",
                },
                {
                    img: "https://img.bidianer.com/website/202403/13/65f164e4e33d8P-DII0Ph-iUXAKiZ.ico?imageView2/2/w/64/h/64/q/100/ignore-error/1",
                    name: "球客岛-足球比分",
                    value: "qiukedao",
                },
                {
                    img: "https://img.bidianer.com/website/202406/05/666017a1f0250DsVqCSo4J9fFWl6m.png?imageView2/2/w/64/h/64/q/100/ignore-error/1",
                    name: "瓜子影视",
                    value: "guaziyingshi",
                },
                {
                    img: "https://img.bidianer.com/website/201804/04/5ac44552a3e2evhmhiA8XSyMQOBiS.svg?imageView2/2/w/64/h/64/q/100/ignore-error/1",
                    name: "新浪微博",
                    value: "xinlangweibo",
                },
                {
                    img: "https://img.bidianer.com/website/201706/18/594684a44f53choOIjdfeHrLf15Zr.svg?imageView2/2/w/64/h/64/q/100/ignore-error/1",
                    name: "知乎",
                    value: "zhihu",
                },
                {
                    img: "https://img.bidianer.com/website/201808/13/5b715c762b032XBQaVRcXskdu7BGB.svg?imageView2/2/w/64/h/64/q/100/ignore-error/1",
                    name: "网易云音乐",
                    value: "wangyiyinyue",
                },
                {
                    img: "https://img.bidianer.com/website/201805/11/5af56bd11e6beGDXzjbIO8UYpQQbh.svg?imageView2/2/w/64/h/64/q/100/ignore-error/1",
                    name: "京东商城",
                    value: "jingdongshangchneg",
                },
                {
                    img: "https://img.bidianer.com/website/201912/06/5de9de139ee79teI-mSwNrH682e2g.svg?imageView2/2/w/64/h/64/q/100/ignore-error/1",
                    name: "唯品会",
                    value: "weipinhui",
                },
                {
                    img: "https://img.bidianer.com/website/201706/18/594683a42450drdiqdUe5LEa2aUa3.svg?imageView2/2/w/64/h/64/q/100/ignore-error/1",
                    name: "淘宝",
                    value: "taobao",
                },
                {
                    img: "https://img.bidianer.com/website/201709/10/59b55acee4c55kQbFcwhbTRy99y4d.svg?imageView2/2/w/64/h/64/q/100/ignore-error/1",
                    name: "腾讯网",
                    value: "tengxunwang",
                },
                {
                    img: "https://img.bidianer.com/website/201808/21/5b7bc8cab911aQtYuxPNgsCeHcZ4K.svg?imageView2/2/w/64/h/64/q/100/ignore-error/1",
                    name: "芒果TV",
                    value: "magnguoTV",
                },
            ],
            activedMenu: 0,
            activedengine: 0,
            linkList: [
                {
                    img: "lls-icon-paperclip",
                    name: "复制链接",
                    value: "paperclip",
                },
                {
                    img: "lls-icon-star-on",
                    name: "添加星标",
                    value: "on",
                },
                {
                    img: "lls-icon-edit",
                    name: "编辑",
                    value: "edit",
                },
                {
                    img: "lls-icon-right",
                    name: "移动到...",
                    value: "right",
                },
                {
                    img: "lls-icon-money",
                    name: "复制到...",
                    value: "money",
                },
                {
                    img: "lls-icon-sold-out",
                    name: "排序",
                    value: "out",
                },
                {
                    img: "lls-icon-plus",
                    name: "添加子网址",
                    value: "plus",
                },
                {
                    img: "lls-icon-delete",
                    name: "删除",
                    value: "delete",
                },
            ],
            starmarkList: [
                {
                    name: "我的常用网址",
                    value: "delete",
                    id: 0,
                },
                {
                    name: "购物旅游",
                    value: "delete",
                    id: 1,
                },
                {
                    name: "视频音乐",
                    value: "delete",
                    id: 2,
                },
                {
                    name: "新闻资讯",
                    value: "delete",
                    id: 3,
                },
                {
                    name: "生活必备",
                    value: "delete",
                    id: 4,
                },
            ],
            input3: "",
        };
    },
    methods: {
        starmarCk(index) {
            this.activedMenu = index;
        },
        engineCk(index) {
            this.activedengine = index;
        },
        hanleChangequeryConfig(command) {
            let arr = this.engineList;
            if (arr.length === 13) {
                this.engineList.push(command);
            } else {
                arr[arr.length - 1] = command;
                this.engineList = [...arr];
            }
        },
    },
};
</script>

<style scoped lang="scss">
.common-links {
    min-width: 1200px;
    padding-top: 75px;
}
.index-website__wrapper {
    border-radius: 3px;
    margin-bottom: 10px;
    padding: 8px 12px 0;
    position: relative;
    background: rgba(255, 255, 255, 1);
    .web-header {
        display: flex;
        position: relative;
        align-items: center;
        height: 30px;
        margin-bottom: 8px;
        .tab-menu {
            height: 24px;
            display: flex;
            position: relative;
            align-items: center;
            li {
                display: flex;
                align-items: center;
                margin-right: 10px;
                list-style-type: none;
                color: #6b7386;
                .move-tab {
                    border-radius: 14px;
                    display: block;
                    height: 24px;
                    line-height: 24px;
                    max-width: 170px;
                    padding: 0 12px 0 2px;
                    position: relative;
                    white-space: nowrap;
                    cursor: pointer;
                }
                .move-active {
                    background: rgb(88, 155, 255);
                    border-radius: 14px;
                    display: block;
                    height: 24px;
                    line-height: 24px;
                    max-width: 170px;
                    padding: 1px 12px 0 2px;
                    color: #fff;
                    position: relative;
                    white-space: nowrap;
                    cursor: pointer;
                }
            }
        }
        .el-icon-plus {
            cursor: pointer;
            height: 20px;
            line-height: 20px;
            width: 20px;
            color: #a1a7b7;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .el-icon-plus:hover {
            background: #0084ff;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            height: 20px;
            line-height: 20px;
            width: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .tool-bar {
            display: flex;
            flex-shrink: 0;
            margin-left: auto;
            a {
                align-items: center;
                border-radius: 12px;
                box-sizing: border-box;
                display: flex;
                height: 24px;
                justify-content: center;
                overflow: hidden;
                width: 60px;
                box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
                color: #a1a7b7;
            }
        }
    }

    .links-grid {
        align-content: flex-start;
        display: flex;
        flex-wrap: wrap;
        .link-item:hover .text-darker {
            background: hsla(0, 0, 100, 0.5);
            border-radius: 2px;
            text-decoration: none;
            box-shadow: 0 1px 8px #ddd;
            color: #000;
        }
        .link-item:hover .el-dropdown {
            visibility: visible;
        }

        .link-item {
            width: 16.6666%;
            height: 44px;
            margin: 0 0 8px;
            position: relative;
            .el-dropdown {
                cursor: pointer;
                position: absolute;
                visibility: hidden;
                bottom: 2px;
                right: 12px;
                z-index: 20;
            }
            a {
                align-items: center;
                display: flex;
                height: 100%;
                box-sizing: border-box;
                position: relative;
                margin-right: 5px;
            }
            .cover {
                width: 22px;
                height: 22px;
                align-items: center;
                box-sizing: border-box;
                display: flex;
                flex-shrink: 0;
                justify-content: center;
                position: relative;
                img {
                    width: 18px;
                }
            }

            .content {
                .items-center {
                    h4 {
                        font-size: 15px;
                        margin: 0 5px;
                        font-weight: normal;
                    }
                }
            }
        }
    }
}
.engine-bg {
    margin-bottom: 10px;
    .search-bar {
        background: #fff;
        border-radius: 3px;
        padding: 0 12px 11px;
        position: relative;

        .engine-header {
            display: flex;
            position: relative;
            .engineShortcutList {
                display: flex;
                margin-right: 10px;
                overflow: hidden;
                padding: 10px 0;
                li {
                    display: flex;
                    justify-content: flex-start;
                    margin-right: 10px;
                }
                .engine-active {
                    background: rgba(0, 132, 255, 0.9);
                    color: #fff;
                }
                .engine-item {
                    display: flex;
                    align-items: center;
                    border-radius: 13px;
                    cursor: pointer;
                    font-size: 12px;
                    height: 26px;
                    padding: 0 11px 0 28px;
                    position: relative;
                    .icon {
                        align-items: center;
                        background: #fff;
                        border-radius: 10px;
                        display: flex;
                        height: 20px;
                        justify-content: center;
                        left: 3px;
                        position: absolute;
                        top: 3px;
                        width: 20px;
                    }
                    span {
                        font-size: 14px;
                    }
                }
            }
            .popover-btn {
                padding-top: 14px;
                .lls-dropdown-link {
                    cursor: pointer;
                }
            }
            .el-popover__reference {
                font-size: 15px;
                position: absolute;
                right: 0;
                top: 13px;
                color: #caccd5;
                i:hover {
                    color: #0084ff;
                }
            }
        }
        .engine-input-wrapper {
            height: 44px;
            .engine-form {
                position: relative;
                .engine-dropdown {
                    align-items: center;
                    display: flex;
                    height: 44px;
                    justify-content: center;
                    left: 0;
                    position: absolute;
                    top: 0;
                    width: 44px;
                    z-index: 1;
                }
            }
        }
    }
}

::v-deep .lls-input__inner {
    height: 44px;
    border-radius: 0;
    padding-left: 40px;
}
::v-deep .lls-input-group__append {
    height: 44px;
    border-radius: 0;
}
::v-deep .lls-input__inner::placeholder {
    font-size: 16px;
}

.lls-icon-more {
    color: #6b7386;
}
</style>
